<template>
    <transition name="move">
        <div class="onlineDetail">
           <div class="activity-text-wrapper">
                <div class="detail-container" v-show="detailList.content">
                    <h2 class="detail-title">{{detailList.title}}</h2>
                    <span class="time">{{detailList.createtime}}</span>
                    <div class="detail-content" v-html="detailList.content">
                    
                    </div>
                </div>
            </div>
            <div class="loading-wrapper" v-show="!detailList.content">
                <loading></loading>
            </div>
        </div>
    </transition>
</template>

<script>
    import axios from 'axios'
    import Loading from 'base/loading/loading'

    export default {
        data () {
            return {
                detailList: {}
            }
        },
        methods: {
            getDetailInfo () {
                // 根据id请求json数据
                axios.post('/api/index.php?g=Api&m=Ucenter&a=onlineactdetail',{
                    openid: localStorage.getItem("openid"),
                    mid: localStorage.getItem("memberid"),
                    onactid: this.$route.params.id
                }).then((res) => {
                    this.detailList = res.data.data
                })
            }
        },
        components: {Loading},
        created () {
            this.getDetailInfo()
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~common/stylus/mixins.styl'
    
    .onlineDetail
        width: 100%
        min-height: 100%
        position: absolute
        background: #fff
        top: 0
        left: 0
        transition: all .2s linear
        &.move-enter,&.move-leave-to
            transform: translate3d(100%,0,0)
        .loading-wrapper
            position: absolute
            width: 100%
            top: 50%
            -webkit-transform: translateY(-50%)
            transform: translateY(-50%)
            z-index: 9
        .detail-container
            padding: 15px 15px 80px 15px
            box-sizing: border-box
            width: 100%
            oveflow: hidden
            background: #fff
            .detail-title
                font-size: 18px
                font-weight: 700
                line-height: 130%
                width: 100%
                text-align: center
            .time
                font-size: 12px
                color: #888
                display: block
                width: 100%
                text-align: center
                margin: 10px 0
            .detail-content
                width: 100%
                line-height: 150%
                font-size: 16px
                overflow: hidden
</style>